<script setup lang="ts">
import {ref} from "vue";
import type {Login} from "@/types/login";
import {useRouter} from "vue-router";
import {loadRouter} from "@/router/backEnd";
import {useUserStore} from "@/stores/user";

const router = useRouter()
const userStore = useUserStore()

let login = ref<Login>({
  username: '',
  password: ''
})

const onLogin = async () => {
  userStore.setLoginInfo({
    name: "admin"
  }, "123456789898")
  //获取并加载路由
  await loadRouter()
  //跳转工作台
  await router.push({path: '/dashboard'})
}
</script>
<template>
  <div class="login-container">
    <div class="login-panel">
      <div class="login-left">
      </div>
      <div class="login-main">
        <div class="login-header">
          Newp-Vue-Admin
        </div>
        <div class="login-body">
          <el-form>
            <el-row>
              <el-col :sm="24" :lg="24" :md="24" :xs="24">
                <el-form-item>
                  <el-input v-model="login.username" placeholder="用户名" />
                </el-form-item>
              </el-col>
              <el-col :sm="24" :lg="24" :md="24" :xs="24">
                <el-form-item>
                  <el-input v-model="login.password" placeholder="密码" type="password"/>
                </el-form-item>
              </el-col>
              <el-col :sm="12" :lg="12" :md="12" :xs="12">
                <el-form-item>
                  <el-input v-model="login.password" placeholder="密码" type="password"/>
                </el-form-item>
              </el-col>
              <el-col :sm="24" :lg="24" :md="24" :xs="24">
                <el-form-item>
                  <el-button type="primary" @click="onLogin" class="w100">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="login-footer">
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.login-container{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-panel{
    width: 800px;
    height: 500px;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    display: flex;

    .login-left{
      width: 300px;
      background-color: blue;
    }

    .login-main{
      flex: 1;
      margin: 20px;
      .login-header{
        text-align: center;
        height: 120px;
        line-height: 120px;
        font-weight: bold;
        font-size: 24px;
      }
      .login-body{
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>